enum Direction {
  top = "top",
  bottom = "bottom",
  left = "left",
  right = "right",
}

/** 
 * 根据鼠标进入div容器的方向，在div的class中增加方向值，以便css选择做一些特效；
 * @param div div容器
 */
export function mouseEnterDirection(div: HTMLDivElement) {
  const rect = div.getBoundingClientRect();
  const theta = Math.atan2(rect.height, rect.width);
  let direction: Direction;

  // 当鼠标进入容器时，计算鼠标与容器的角度
  div.addEventListener("mouseenter", (e) => {
    const x = e.offsetX - rect.width / 2;
    const y = rect.height / 2 - e.offsetY;
    const d = Math.atan2(y, x);

    // 根据角度，添加不同的类名
    if (d < theta && d >= -theta) {
      direction = Direction.right;
    } else if (d >= theta && d < Math.PI - theta) {
      direction = Direction.top;
    } else if (d >= Math.PI - theta || d < -(Math.PI - theta)) {
      direction = Direction.left;
    } else {
      direction = Direction.bottom;
    }
    div.classList.add(direction)
  });

  // 当鼠标离开容器时，移除所有类名
  div.addEventListener("mouseleave", (e) => {
    div.className = "container";
  });
}
